import 'package:dots_indicator/dots_indicator.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ulearning_app/pages/welcome/widgets.dart';

// 定义一个提供者
final indexProvider = StateProvider<int>((ref) => 0);

// 消费组件ConsumerWidget
class Welcome extends ConsumerWidget {
  Welcome({super.key});
  final PageController controller = PageController();

  @override
  // 动态组件WidgetRef ref
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听indexProvider
    final index = ref.watch(indexProvider);
    return SafeArea(
      child: Container(
        margin: const EdgeInsets.only(top: 30),
        child: Scaffold(
          backgroundColor: Colors.white,
          body: Stack(
            alignment: Alignment.bottomCenter,
            children: [
              PageView(
                onPageChanged: (value) {
                  // 更新indexProvider的值
                  ref.read(indexProvider.notifier).state = value;
                },
                controller: controller,
                children: [
                  appOnboardingPage(
                    imaagePath: "assets/images/reading.png",
                    title: "第一屏",
                    subTitle: "Learn anything, anywhere",
                    index: 1,
                    controller,
                    context: context,
                  ),
                  appOnboardingPage(
                    imaagePath: "assets/images/man.png",
                    title: "第二屏",
                    subTitle: "Learn anything, anywhere",
                    index: 2,
                    controller,
                    context: context,
                  ),
                  appOnboardingPage(
                    imaagePath: "assets/images/boy.png",
                    title: "第三屏",
                    subTitle: "Learn anything, anywhere",
                    index: 3,
                    controller,
                    context: context,
                  ),
                ],
              ),
              Positioned(
                bottom: 20,
                child: DotsIndicator(
                  // 使用ref.watch(indexProvider)监听indexProvider的值
                  position: index,
                  dotsCount: 3,
                  mainAxisAlignment: MainAxisAlignment.center,
                  decorator: const DotsDecorator(
                      size: Size.square(9.0),
                      activeSize: Size(18.0, 9.0),
                      activeShape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                      )),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
